<template>
	<view class="activityPage">
		<uni-nav-bar height="88rpx" fixed title="活动详情" color="#000000" :border="false" left-icon="left"
			@clickLeft="$back" statusBar>
		</uni-nav-bar>
		<view>
			<imageSwiper class="img" :autoplay="false" :imgs="dataInfo.activityFile">
			</imageSwiper>
		</view>
		<view class="activityPage-content">
			<view class="activityTopBox">
				<view class="rightContent">
					<view class="activityTitle ">
						<view class="u-line-2" style="font-size: 32rpx;">
							{{dataInfo.activityName}}
						</view>
					</view>
					<view class="activityIntegral">
						<image src="@/static/activity/activityScore.png" style="width: 24rpx; height: 24rpx; margin-right: 8rpx;"></image>
						<view>积分：{{dataInfo.activityScore}}</view>
					</view>
					<view style="height: 1px; background-color: #e7e7e7; width: 100%;"></view>
					<view class="activityTypeBox">
						<image src="@/static/activity/activityTime.png" style="width: 24rpx; height: 24rpx; margin-right: 4rpx;"></image>
						<view class="activityTypeText">{{setTime(dataInfo.startTime)}}~{{setTime(dataInfo.endTime)}}</view>
					</view>
					<view class="activityTypeBox">
						<image src="@/static/activity/activityPlace.png" style="width: 24rpx; height: 24rpx; margin-right: 4rpx;"></image>
						<view class="activityTypeText">{{dataInfo.address||'无'}}</view>
					</view>
					<view class="activityTypeBox">
						<image src="@/static/activity/activityType.png" style="width: 24rpx; height: 24rpx; margin-right: 4rpx;"></image>
						<view class="activityTypeText">{{dicts.event_type[dataInfo.activityType].label}}</view>
						<!-- <view class="activityType">一次性</view> -->
					</view>
				</view>
			</view>
			<view class="activityInfoBox">
				<!-- <view class="activityInfo-title">任务活动</view> -->
				<view class="activityInfoBox-content">
					<mp-html :content="dataInfo.details||dataInfo.remark" />
				</view>

				<!-- <view class="participateInfoBox" style="margin-top:32rpx ;">
				<uqrcode class="QRCode" ref="uqrcode" sizeUnit="rpx" size="330" canvas-id="qrcode" :value="QRCodeUrl"
					:options="{ margin: 10 }">
				</uqrcode>
			</view> -->
			</view>
			<view v-if="(dataInfo.isEnroll&&dataInfo.activityType!=1)||(dataInfo.isEnroll&&dataInfo.activityType==1)">
				<view class="submitBtnBoxFP"></view>
				<view class="submitBtnBoxF">
					<view class="submitBtnBox">
						<view class="submitBtn" @click="modalOpen('bmModal')"
							v-if="dataInfo.isEnroll&&dataInfo.activityType!=1">
							报名
						</view>
						<!-- <view class="submitBtn" v-else-if="dataInfo.isCard&&dataInfo.activityType!=1"
						@click="modalOpen('clockIn')">
						打卡
					</view> -->
						<view class="submitBtn" @click="modalOpen('clockIn')"
							v-if="dataInfo.isEnroll&&dataInfo.activityType==1">
							参与问卷
						</view>
					</view>
				</view>

			</view>
		</view>

		<u-modal class="bm" :show="clockInShow" :zoom="false" :showConfirmButton="false">
			<view class="contentBox">
				<view class="titleBox">
					<view class="title">{{dataInfo.activityType!=1?'活动打卡':'参与问卷'}}</view>
					<view class="closeBtn" @click="closeModal('clockIn')">
						<uni-icons type="closeempty" size="48rpx"></uni-icons>
					</view>
				</view>
				<view class="modalContentBox">
					<view class="modalRow" style="margin-top: 36rpx;">
						<view class="">
							<view class="rowTitle">报名人</view>
							<view class="rowText">{{userInfo.nickName}}</view>
						</view>
						<view class="">
							<view class="rowTitle">联系方式</view>
							<view class="rowText">{{userInfo.phonenumber}}</view>
						</view>
					</view>
					<dynamicForms ref="dkForm" :uploadImg="dataInfo.activityType!=1" @submit="dkSubmit" btnText="提交">
					</dynamicForms>
				</view>
			</view>
		</u-modal>
		<u-modal class="bm" :show="bmModalShow" :zoom="false" :showConfirmButton="false">
			<view class="contentBox" v-if="userInfo">
				<view class="titleBox">
					<view class="title">{{dataInfo.activityType!=1?'活动报名':'参与问卷'}}</view>
					<view class="closeBtn" @click="closeModal('bmModal')">
						<uni-icons type="closeempty" size="48rpx"></uni-icons>
					</view>
				</view>
				<view class="modalContentBox">
					<view class="modalRow" style="margin-top: 36rpx;">
						<view class="">
							<view class="rowTitle">报名人</view>
							<view class="rowText">{{userInfo.nickName}}</view>
						</view>
						<view class="">
							<view class="rowTitle">联系方式</view>
							<view class="rowText">{{userInfo.phonenumber}}</view>
						</view>
					</view>
					<dynamicForms ref="formRef" @submit="addSubmit" btnText="提交"></dynamicForms>
				</view>
			</view>
		</u-modal>
		<u-modal :show="rzShow" title="提示" content="请先提交认证申请成为人才!" confirmText="去提交" showCancelButton cancelText="取消"
			@confirm="toRZ" @close="RZX" @cancel="RZX"></u-modal>
	</view>
</template>

<script>
	import * as activityApi from "@/api/activity.js"
	import * as systemApi from "@/api/system.js"
	import * as activityRegistrationApi from "@/api/activityRegistration.js"
	export default {
		data() {
			return {
				clockInShow: false,
				bmModalShow: false,
				rzShow: false,
				userInfo: {
					userType: ''
				},
				dataInfo: {
					activityFile: "",
					activityId: '',
					activityName: "",
					activityType: "0",
					createBy: null,
					createTime: "2024-02-20 16:46:59",
					eliteType: "1",
					endTime: "2024-03-01",
					isPublic: "0",
					remark: "<p>xxxx</p>",
					source: "xxxx",
					startTime: "2024-02-29",
					updateBy: null,
					updateTime: "2024-02-29 11:01:02",
					enrollUserNum: 0,
					address: '',
					enrollUserList: []
				},
				QRCodeUrl: '',
				formData: {
					phone: '',
					wx: '',
					height: '',
					weight: ''
				},
				formRuls: {
					phone: '',
					wx: '',
					height: '',
					weight: ''
				},
				dicts: {
					event_type: {},
				},
				dictList: {
					event_type: [],
				},
			};
		},
		onLoad(options) {
			console.log(options);
			this.infoId = options.id

			this.getDictDataList('event_type')
		},
		onShow() {
			this.getInfo()
			this.$store.dispatch('userBaseInfo').then(res => {
				this.userInfo = res.user
				console.log(res);
			})
			// this.userInfo = this.$store.getters.my_userInfo
			console.log(this.userInfo);
		},
		methods: {
			getDictDataList(dictType) {
				return new Promise((resolve, reject) => {
					systemApi.dictDataList(dictType).then(({
						rows
					}) => {
						let objs = {}
						let keyValues = []
						rows.forEach((item) => {
							objs[item.dictValue] = {
								label: item.dictLabel,
								color: `rgb(${item.remark||'57,137,248'})`,
								background: `rgba(${item.remark||'57,137,248'},0.1)`
							}
							keyValues.push({
								label: item.dictLabel,
								text: item.dictLabel,
								value: item.dictValue
							})
						})
						this.dicts[dictType] = objs
						this.dictList[dictType] = keyValues
						resolve({
							objs,
							keyValues,
							rows
						})
					}).catch(reject)
				})
			},
			toRZ() {
				uni.$u.debounce(() => {
					this.$navTo(`pages/common/authentication/authentication`)
					this.rzShow = false
				}, 500)
			},
			RZX() {
				this.rzShow = false
			},
			dkSubmit(formJson, picture) {
				let dataObj = null
				if (this.dataInfo.activityType == 1) {
					dataObj = {
						activityId: this.infoId,
						information: JSON.stringify(formJson),
						submission: JSON.stringify(formJson),
					}
				} else {
					const urls = JSON.parse(picture).map(item => item.url)
					dataObj = {
						activityId: this.infoId,
						information: JSON.stringify(formJson),
						submission: JSON.stringify(formJson),
						picture: urls.toString()
					}
				}

				uni.$u.throttle(activityRegistrationApi.apmParticipation(dataObj).then(res => {
					this.$toast(this.dataInfo.activityType == 1 ? '参与成功' : '打卡成功')
					this.closeModal('clockIn')
					setTimeout(() => {
						this.getInfo()
					}, 600)
				}), 500)
			},
			addSubmit(formJson) {
				const dataObj = {
					activityId: this.infoId,
					information: JSON.stringify(formJson)
				}
				uni.$u.throttle(activityRegistrationApi.addenroll(dataObj).then(res => {
					this.$toast('报名成功')
					this.closeModal('bmModal')
					setTimeout(() => {
						this.getInfo()
					}, 600)
				}), 500)
			},
			getInfo() {
				activityApi.activityId(this.infoId).then(({
					data
				}) => {
					this.dataInfo = data
					console.log(data);
					// this.QRCodeUrl =
					// 	`https://elite.wzheiying.com/elite-rc/pages/activity/activityInfo/activityInfo?id=${data.activityId}`
					this.QRCodeUrl =
						`http://192.168.1.188:8080/elite-rc/pages/activity/activityInfo/activityInfo?id=${data.activityId}`
				})
			},
			setTime(timeStr) {
				return timeStr.split(' ')[0]
			},
			checkForm() {
				const formData = this.formData
				let formRuls = this.formRuls
				if (!uni.$u.test.mobile(formData.phone)) {
					formRuls.phone = "请输入正确的手机号码"
					return false
				} else {
					formRuls.phone = ""
				}
				if (uni.$u.test.isEmpty(formData.wx)) {
					formRuls.wx = "请输入微信账号"
					return false
				} else {
					formRuls.wx = ""
				}
				if (uni.$u.test.isEmpty(formData.height)) {
					formRuls.height = "请输入身高"
					return false
				} else {
					formRuls.height = ""
				}
				if (uni.$u.test.isEmpty(formData.weight)) {
					formRuls.weight = "请输入体重"
					return false
				} else {
					formRuls.weight = ""
				}
				return true
			},
			submit() {

				if (!this.checkForm()) {
					return
				}
			},
			closeModal(showName) {
				this[showName + 'Show'] = false
				if (showName == 'bmModal') {
					let formData = this.formData
					let formRuls = this.formRuls
					for (let key in formData) {
						console.log(key);
						formData[key] = ''
					}
					for (let key in formRuls) {
						formRuls[key] = ''
					}
				}
			},
			modalOpen(showName) {
				const that = this
				// if (this.userInfo.userType == "yk") {
				// 	this.rzShow = true
				// } else {
				that[showName + 'Show'] = true
				if (showName == 'bmModal') {
					that.$nextTick(() => {
						that.$refs.formRef.initData(this.dataInfo.formJson)
					})
				} else {
					that.$nextTick(() => {
						that.$refs.dkForm.initData(this.dataInfo.cardJson)
					})
				}
				// }
			}
		}
	}
</script>

<style lang="scss" scoped>
	page,
	body {
		background-color: #F4F7FF;
	}

	/deep/ .bm .u-modal__content {
		padding: 30rpx 0 0 0 !important;
	}

	.img {
		width: 100%;
		height: 400rpx;
	}

	.activityPage {
		background-color: #F4F7FF;

		.activityPage-content {
			padding: 30rpx;
			box-sizing: border-box;
			margin-top: -160rpx;
			position: relative;
			z-index: 1;

			.activityTopBox {
				width: 100%;
				background: #FFFFFF;
				border-radius: 14rpx;
				box-sizing: border-box;
				display: flex;
				align-items: flex-start;
				padding: 24rpx;
				margin-bottom: 30rpx;

				.leftImg {
					width: 160rpx;
					height: 160rpx;
					margin-right: 24rpx;
					flex-shrink: 0;
				}

				.rightContent {
					width: 100%;
					
					.activityTitle {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 28rpx;
						min-height: 70rpx;
						color: #000000;
					}

					.activityIntegral {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 26rpx;
						color: #ffaa00;
						margin-bottom: 20rpx;
						display: flex;
						align-items: center;
					}

					.activityTypeBox {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #666666;
						display: flex;
						align-items: center;
						margin-left: 4rpx;
						margin-top: 8rpx;
					}

					.activityTypeText {}
				}
			}

			.activityInfoBox {
				padding: 30rpx 30rpx 0rpx 30rpx;
				box-sizing: border-box;
				background-color: #fff;
				border-radius: 16rpx;

				.activityInfo-title {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #000000;
					margin-bottom: 24rpx;
				}

				.activityInfoBox-content {
					font-size: 28rpx;
				}
			}
		}
	}

	.submitBtnBoxFP {
		width: 100%;
		height: 100rpx;
	}

	.submitBtnBoxF {
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		width: 100%;
	}

	.submitBtnBox {
		width: 100%;
		// margin-top: 88rpx;
		text-align: center;
		// margin-bottom: 80rpx;
		box-sizing: border-box;
		padding: 0 30rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);

		.submitBtn {
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 76rpx;
			background: #6FA9FF;
			border-radius: 40rpx;
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}

		.numText {
			margin-top: 30rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #6FA9FF;
		}
	}

	.contentBox {
		width: 100%;
		padding-bottom: 40rpx;

		.titleBox {
			display: flex;
			justify-content: space-between;
			padding-bottom: 30rpx;
			border-bottom: 2rpx solid #F1EEEE;
			margin: 0 30rpx;

			.title {
				width: 100%;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
			}

			.closeBtn {
				flex-shrink: 0;
			}
		}

		.modalContentBox {
			padding: 0 30rpx;

			.btn {
				height: 76rpx;
				background: #6FA9FF;
				border: 2rpx solid #6FA9FF;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
				display: flex;
				margin-top: 30rpx;
				justify-content: center;
				align-items: center;

				&.close {
					background: #fff;
					border: 2rpx solid #6FA9FF;
					color: #6FA9FF;
				}
			}

			.modalRow {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				margin-bottom: 36rpx;
			}

			.modalRowTip {
				display: flex;
				align-items: center;
				height: 40rpx;
				color: #F00000;
				font-size: 24rpx;
				padding-left: 150rpx;
			}

			.modalInputRow {
				display: flex;
				align-items: center;

				.label {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #000000;
					width: 138rpx;
					flex-shrink: 0;
				}

				.inputBox {
					width: 100%;
					height: 88rpx;
					background: #FFFFFF;
					border-radius: 16rpx;
					border: 2rpx solid #DADADA;
					box-sizing: border-box;
					display: flex;
					align-items: center;

					&.err {
						border-color: #F00000;
					}

					.inputSuffix {
						padding-right: 20rpx;
						flex-shrink: 0;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #979797;
					}

					.input {
						padding: 0 20rpx;
						width: 100%;
						height: 98%;
					}
				}
			}

			.rowTitle {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #979797;
				margin-bottom: 10rpx;
			}

			.rowText {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
			}
		}
	}
</style>